<template>
  <!-- 二维分析图 由于数据格式专利与论文不同-->
  <div>
    <div id="ChartFPatent" class="chart"></div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import Ecolors from "@/utils/chartColors";
import { resize, spaceTxt } from "@/utils/utils";
export default {
  mixins: [resize],
  props: {
    chartData: {}
  },
  data() {
    return {
      chart: null,
      colors: [],
      seriesData: [],
      doc_count: []
    };
  },
  computed: {
    ...mapState(["curChartConfig"])
  },
  watch: {
    chartData() {
      this.init();
    }
  },
  mounted() {
    this.chart = this.$echarts.init(document.getElementById("ChartFPatent"));
    this.$emit("domRef", document.getElementById(this.chartId))
    this.init();
  },
  methods: {
    init() {
      let chartData = this.chartData;
      //过滤掉不公告发明人
      let newarr = [];
      chartData.map(item => {
        if(item.key != "不公告发明人"){
          newarr.push(item)
        }
      })
      chartData = newarr
      let daysY = [];
      chartData &&
        chartData.map(item => {
          daysY.push(item.key);
        });
      // daysY = Array.from(new Set(daysY));
      // daysY = daysY.sort();  
      let hoursX = [];
      chartData &&
        chartData.map(item => {
          item.childs &&
            item.childs.map(it => {
              hoursX.push(it.key.split("-")[0]);
            });
        });
      hoursX = Array.from(new Set(hoursX));
      hoursX = hoursX.sort()
      let data = [];
      chartData &&
        chartData.map((item, index) => {
          item.childs &&
            item.childs.map((it, i) => {
              let ii = hoursX.findIndex(itt => {
                return it.key.split("-")[0] == itt;
              });
              data.push([index, ii, it.doc_count]);
              this.doc_count.push(it.doc_count);
            });
        });
      data = data.reverse()
      data = data.map(v => {
        return [v[1], v[0], v[2] || "-"]; // 第一个参数为Y轴数据
      });
      let minV = Math.min(...this.doc_count);
      let maxV = Math.max(...this.doc_count);
      let option = {
        tooltip: {
          confine: true,
          show: true,
          trigger: "item",
          backgroundColor: "#fff",
          extraCssText: "box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);",
          borderRadius: 0,
          padding: 5,
          textStyle: {
            color: "#000",
          },
          formatter: function(value) {
            let data = value.data
            let str = `${value.marker} ${value.name} ${daysY[data[1]]} ${data[2]}`
            return str
          }
        },
        backgroundColor: "#fff",
        xAxis: {
          type: "category",
          data: hoursX,
          splitArea: {
            show: true
          },
          axisLabel: {
            rotate: 30,
            interval: 0,
            fontSize: 12,
            formatter: function(value) {
              let _space = 14
              let regx_zh = /^[\u4e00-\u9fa5]*$/; // 是否是中文
              if (regx_zh.test(value)) {
                _space = 6
              }
              let newTxt = "";
              let number = Math.ceil(value.length / _space);
              if (number <= 2) {
                for (let j = 0; j < number; j++) {
                  newTxt += value.substr(j * _space, _space);
                  if (j < number - 1) {
                    newTxt += "\n";
                  }
                }
              } else {
                for (let j = 0; j < number; j++) {
                  if (j <= 1) {
                    newTxt += value.substr(j * _space, _space);
                    if (j < 1) {
                      newTxt += "\n";
                    }
                  }
                }
                newTxt += "..."
              }
              return newTxt;
            }
            // formatter: function(value) {
            //   return spaceTxt(value, 40);
            // }
          }
        },
        yAxis: {
          type: "category",
          data: daysY,
          splitArea: {
            show: true
          },
          axisLabel: {
            // rotate: 30,
            interval: 0,
            fontSize: 12,
            formatter: function(value) {
              let _space = 14
              let regx_zh = /^[\u4e00-\u9fa5]*$/; // 是否是中文
              if (regx_zh.test(value)) {
                _space = 6
              }
              let newTxt = "";
              let number = Math.ceil(value.length / _space);
              if (number <= 2) {
                for (let j = 0; j < number; j++) {
                  newTxt += value.substr(j * _space, _space);
                  if (j < number - 1) {
                    newTxt += "\n";
                  }
                }
              } else {
                for (let j = 0; j < number; j++) {
                  if (j <= 1) {
                    newTxt += value.substr(j * _space, _space);
                    if (j < 1) {
                      newTxt += "\n";
                    }
                  }
                }
                newTxt += "..."
              }
              return newTxt;
            }
            // formatter: function(value) {
            //   return spaceTxt(value, 40);
            // }
          }
        },
        dataZoom: {
          type: 'slider',
          // 其他配置项
        },
        grid: {
          left: "20px",
          right: "20px",
          top: "0",
          bottom: "44px",
          containLabel: true
        },
        visualMap: {
          show: false,
          min: minV,
          max: maxV,
          calculable: true,
          orient: "horizontal",
          left: "center",
          bottom: "15%"
        },
        series: [
          {
            type: "heatmap",
            data: data,
            label: {
              show: true
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowColor: "rgba(0, 0, 0, .5)"
              }
            }
          }
        ]
      };
      this.chart.clear();
      this.chart.setOption(option, true);

      this.$emit("chartDom", this.chart);

      // 后台报告下载
      this.chart.on("finished", () => {
        // let tempId = this.$route.query.tempId;
        // if (tempId) {
        // }
        this.getEchartImg(this.chart.getDataURL());
      });
    },
    getEchartImg(base) {
      window.echartImg = base;
    }
  },

  destroyed() {
    this.chart.dispose();
    this.chart = null;
  }
};
</script>

<style lang="scss" scoped>
.chart {
  // height: 800px;
  // background-color: #fff;
  width: 1000px;
  height: 800px;
}
</style>
